<template>
    <div class="outsideBox">
        <div class="topTitel">
            <p>快捷登录</p>
        </div>
        <div class="subBox">
            <ul>
                <li>
                    <i class="logIcon"></i><input type="text" v-model="subForm.phone" class="logInp" placeholder="请输入11位数手机号" maxlength="11">
                    
                </li>
                <li>
                    <i class="codeIcon"></i>

                    <input type="text" v-model="subForm.code" class="logInp" placeholder="请输入验证码" maxlength="4"> 
                   
                    <div v-show="showTestOne" class="getCodeBtn" @click="getCodeClickFun">获取验证码</div> 
                    <div v-show="showTestTwo" class="getCodeBtn" @click="getCodeClickFunTwo">重发验证码</div>
                    <div v-show="showTestThree" class="getCodeBtn timeTiming"><span>{{num}}</span>s后重发</div>
                </li>
            </ul>
        </div>
        <div>
            <button :class="!isSubBtnShow ? 'subBtn' : 'subBtnTwo' "  :disabled = isSubBtnShow  @click="subLoginData" >登录</button>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui';
import api from "@/api/index";
import axios from 'axios';
import TabelljList from "@/common/phoneRules";
export default {
    name: 'login',
    data(){
        return{
            showTestOne:true,
            showTestTwo:false,
            showTestThree:false,
            num:60,
            timer:null,
            isSubBtnShow:true,
            subForm:{
                phone:null,
                code:null
            },

            phoneLen:null,
            isGetCode:false,
            fromuId:''
            
        }
    },
    watch:{
        "subForm.phone": function (n, o) {
            if (n != "") {
                // console.log(n)
                let numLen = n.toString().length
                this.phoneLen = numLen
                // console.log(numLen)
                if(numLen == 11){
                    this.oneShow = true
                    if(this.twoShow&&this.oneShow){
                        this.isSubBtnShow=false
                    }
                }else{
                    this.isSubBtnShow=true
                }
                
            }else{
            }

        },
        "subForm.code": function (n, o) {
            if (n != "") {
                // console.log(n)
                let numLen = n.toString().length
                // console.log(numLen)
                if(numLen == 4){
                    this.twoShow = true
                    if(this.twoShow&&this.oneShow){
                        this.isSubBtnShow=false
                    }
                }else{
                    this.isSubBtnShow=true
                }
            }else{
            }

        },

    },
    created() {
        this.fromuId = localStorage.getItem('fromuId');
    },
    beforeDestroy(){
            //清除定时器
        clearInterval(this.timer)
      },
    methods: {
        //点击获取验证码
        getCodeClickFun(){
            //手机号格式验证通过
            if(TabelljList.phoneRulesFun(this.subForm.phone)){
                this.isGetCode = true
                //手机号验证通过之后倒计时
                this.showTestOne = false
                this.showTestThree = true
                this.timer= setInterval(()=>{
                    this.num--
                    // console.log(this.num)
                    if(this.num==-1){
                        this.showTestThree = false
                        this.showTestTwo = true
                        this.num == 60
                        return
                    }
                },1000)
                //获取验证码
                let obj = {
                    mobile:this.subForm.phone
                }
                api.getLoginVcodeApi(obj).then(res=>{
                    if (res.msgCode == "000") {

                    } else {
                        Toast({
                            message: res.msg,
                            position: "middle",
                            duration: 2000
                        });
                    }
                })
            }else{
                // console.log("请输入正确的手机号")
            }
        },
        //点击重新获取验证码
        getCodeClickFunTwo(){
            clearInterval(this.timer)
            this.num = 60
            //手机号格式验证通过
            if(TabelljList.phoneRulesFun(this.subForm.phone)){
                //手机号验证通过之后
                this.showTestThree = true
                this.showTestTwo = false
                this.timer= setInterval(()=>{
                    this.num--
                    console.log(this.num)
                    if(this.num==-1){
                        this.showTestThree = false
                        this.showTestTwo = true
                        this.num == 60
                        return
                    }
                },1000)


                let obj = {
                    mobile:this.subForm.phone
                }
                api.getLoginVcodeApi(obj).then(res=>{
                    if (res.msgCode == "000") {

                    } else {
                        Toast({
                            message: res.msg,
                            position: "middle",
                            duration: 2000
                        });
                    }
                })

            }else{
                // console.log("请输入正确的手机号")
            }
        },
        //点击登录
        subLoginData(){
            if(this.isGetCode){
                Indicator.open();
                let obj = {
                    mobile :this.subForm.phone,
                    vcode :this.subForm.code,
                }
                if(this.fromuId){
                    obj.unionId = this.fromuId
                }
                api.loginApi(obj).then(res=>{
                    if (res.msgCode == "000") {
                        Indicator.close();
                        let token = res.data.token
                        localStorage.setItem('Token',token);
                        localStorage.setItem('Phone',this.subForm.phone);
                        this.$router.replace({path:"/"})
                    } else {
                        Toast({
                            message: res.msg,
                            position: "middle",
                            duration: 2000
                        });
                        Indicator.close();
                    }
                })
            }else{
                Toast({
                    message: '请获取验证码',
                    position: "middle",
                    duration: 2000
                });
            }
        },
        //获取分享url的ID
        getFromUId(){

            
        }        

    }
}
</script>
<style scoped>
    .outsideBox{
        width: 100%;
        height: 100vh;
        padding: 23px 34px;
        box-sizing: border-box;
        background-color: white;
    }
    .topTitel{
        font-size: 24px;
        color: #333333;
        font-weight: normal;
        font-stretch: normal;
        margin-bottom: 30px;
        font-family: PingFangSC-Medium;
    }

    .subBox{
        /* background-color: gray; */
        width: 100%;
        /* height: 50px; */
    }
    .subBox ul{
        margin-bottom: 50px;
    }
    .subBox ul li{
        position :relative;
        width: 100%;
        height: 60px;
        padding-top: 18px;
        padding-bottom: 18px;
        box-sizing: border-box;
        border-bottom: 1px solid #dddddd
    }

    .subBox ul li .logInp{

        height: 22px;
        /* margin-left: 33px; */
        border:none;
        font-size: 14px;
        font-weight: bold;
        font-family: PingFangSC-Regular;
    }
     .subBox ul li .logInp::placeholder{
         color: #bbb;
         font-weight: normal;
     }

    .subBox ul li .getCodeBtn{
      
        color: red;
        position: absolute;
        right:0;
        top:50%;
        transform: translate(0,-50%);
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: normal;
	    font-stretch: normal;
        line-height: 23px;

    }
    .subBox ul li .timeTiming{
        color: #999999;
    }
    .subBtn{
        width: 100%;
        height: 45px;
        background-color: #f73657;
        border-radius: 3px;
        text-align: center;
        line-height: 45px;
        color: white;
        outline: none;
        border: 1px solid transparent;
        font-size: 16px;
        font-family: PingFangSC-Regular;
    }
    .subBtnTwo{
        width: 100%;
        height: 45px;
        background-color: #f73657;
        border-radius: 3px;
        text-align: center;
        line-height: 45px;
        color: white;
        opacity: 0.3;
        outline: none;
        border: 1px solid transparent;
        font-size: 16px;
        font-family: PingFangSC-Regular;
    }

    .subBox ul li .logIcon{
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url('../../assets/img/icon/mine/phone@3x.png');
        /* background-size: 22px; */
        background-size: 100% auto;
        vertical-align:top;
        margin-right: 5px;
    }
    .subBox ul li .codeIcon{
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url('../../assets/img/icon/mine/code@3x.png');
        /* background-size: 22px; */
        background-size: auto 100%;
        vertical-align:top;
         margin-right: 5px;
    }



</style>

